<template>
  <div class="c">
    <el-form :model="userData" label-width="120px">
      <el-form-item label="手机号: " prop="phoneNumber">
        <el-input v-model="phoneNumber" />
      </el-form-item>
      <el-form-item label="旧密码: " prop="password">
        <el-input v-model="oldPassword" />
      </el-form-item>
      <el-form-item label="新密码: " prop="password">
        <el-input v-model="newPassword" />
      </el-form-item>
      <el-form-item label="确认新密码: " prop="password">
        <el-input v-model="newPassword2" />
      </el-form-item>
      <div class="d">
        <el-button type="primary" class="btn2" @click="this.$router.push('./login')">取消</el-button>
        <el-button type="primary" class="btn2" @click="updatePassword">确认修改</el-button>
      </div>
    </el-form>
</div>
  
</template>

<script>
import { reactive, toRefs } from 'vue'

import { ElMessage, ElMessageBox } from 'element-plus'

export default {
    setup() {
      const userData = reactive({
          phoneNumber: '12345678909',
          oldPassword: '',
          newPassword: "",
          newPassword2: ""
      })
      return {
        ...toRefs(userData)
      }
    },
    methods: {
      // 修改密码
      updatePassword() {
          var _this = this
          let formData = new FormData()
          formData.append("phoneNumber",this.phoneNumber)
          formData.append("newPassword",this.newPassword)
          formData.append("oldPassword",this.oldPassword)
          ElMessageBox.confirm('你确定修改密码吗？', '警告',
              {
                  confirmButtonText: 'Yes',
                  cancelButtonText: 'Cancel',
                  type: 'warning',
              }
          )
              .then(() => {
                this.$axios
                      .post('user/updatepassword',formData)
                      .then( response => {
                          let stateCode = response.headers["state"]
                          if(stateCode=="200"){
                            this.$router.push('./login')
                            this.$message.success('修改密码成功!')
                          }
                          else if(stateCode==""){
                              this.$message.success("修改密码异常！")
                          }
                          else{
                              this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
                          }

                      })
                      .catch(function (error){
                          let stateCode = error.response.headers["state"]                            
                          if(stateCode!=""){
                              _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
                          }
                          else{
                              _this.$message.error("后端异常")
                          }
                      })
                      .then(function (){
                          console.log("测试成功")
                      }) 
                  })
                  .catch(() => {
                      ElMessage({
                          type: 'error',
                          message: '已取消修改密码',
                      })
                  })
      }
    }
}
</script>

<style scoped>
.a {
  height: 100%;
  width: 100%;
  display: block;
  /* background-image: url(); */
  background-color: beige;
  box-sizing: border-box;
}

.b {
  height: 10%;
  width: 100%;
  background-color: gray;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  left: 0px;
  top: 0px;
  background-image: url("../../assets/login2.jpg");
  background-size: cover;
  opacity: 50%;
  box-sizing: border-box;
}


.c {
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.d {
  height: 20%;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items:flex-end;
  margin-top: 80px;
  box-sizing: border-box;
}

.e {
  font-size: 0.5em;
  color: red;
  margin-right: 90px;
  text-decoration:underline;
  cursor: pointer;
  box-sizing: border-box;
}

.btn {
    /* em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5
    vh就是当前屏幕可见高度的1%
    vw就是当前屏幕宽度的1% */
    height: 3em;
    width: 6em;
    font-size: 1em;
    margin-right: 20px;
}

.btn2 {
    /* em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5
    vh就是当前屏幕可见高度的1%
    vw就是当前屏幕宽度的1% */
    /* height: 3em;
    width: 6em;
    font-size: 1em; */
}

.loginForm {
  height: 50%;
  width: 30%;
  display: flex;
  background-color: aquamarine;
  box-sizing: border-box;
}


</style>